<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>PptxGenJS | Tools | Data to Chart</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.min.js" integrity="sha384-VQqxDN0EQCkWoxt/0vsQvZswzTHUVOImccYmSyhJTp7kGtPed0Qcx8rK9h9YEgx+"
		crossorigin="anonymous"></script>
	<!-- bootstrap -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-okaidia.min.css"
		integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
		integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<!-- local styles -->
	<link rel="stylesheet" href="./data2chart.css">
	<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@latest/dist/pptxgen.bundle.js"></script>
	<script>
		const INPUT_ELE_ID = "inputTextArea";
		const OUTPUT_ELE_ID = "outputTextArea";

		/* INPUT:
			|----|---------|-------|------|
			|    |Australia|Belgium|Canada|
			|1976|    10.25|  21.54| 18.07|
			|1977|    10.23|  25.39| 19.21|
			|1978|    10.80|  28.35| 20.62|
			|1979|    12.82|  30.45| 23.89|
			|1980|    13.64|  30.52| 25.02|
		*/
		/* OUTPUT:
			const LABELS = ["1976", "1977", "1978", "1979", "1980"];
			const CHART_DATA = [
				{ name: "Australia", labels: LABELS, values: [5.01, 4.59, 3.65, 3.62, 3.14] },
				{ name: "Belgium",   labels: LABELS, values: [4.63, 3.67, 3.26, 3.21, 2.79] },
				{ name: "Canada",    labels: LABELS, values: [4.27, 3.61, 3.23, 3.24, 2.78] },
			];
		*/
		function convertInputData() {
			const tabDelimData = (document.getElementById(INPUT_ELE_ID).value || '').trim();
			let dataLabels = [];
			let chartData = [];
			let strOutput = '';

			// 1: build data
			tabDelimData
				.split("\n")
				.filter((_item, idx) => idx === 0)
				.forEach((row, _idx) => {
					row.split("\t").forEach((cell, idx) => {
						if (idx > 0) {
							chartData.push({
								name: cell,
								labels: "dataLabels",
								values: [],
							});
						}
					});
				});

			// 2: add data
			tabDelimData
				.split("\n")
				.filter((_item, idx) => idx > 0)
				.forEach((row, idx) => {
					row.split("\t").forEach((cell, idy) => {
						if (idy === 0) {
							dataLabels.push(cell);
						} else {
							chartData[idy - 1].values.push(Number(cell));
						}
					});
				});

			// 3: create javascript code
			strOutput = "let pptx = new PptxGenJS();\n";
			strOutput += "let slide = pptx.addSlide();\n";
			strOutput += "\n";
			strOutput += `const DATA_LABELS = ${JSON.stringify(dataLabels)};\n`;
			strOutput += `const CHART_DATA = [\n`;
			chartData.forEach((item) => {
				strOutput += `  {\n`;
				strOutput += `    "name": "${item.name}",\n`;
				strOutput += `    "labels": DATA_LABELS,\n`;
				strOutput += `    "values": ${JSON.stringify(item.values)},\n`;
				strOutput += `  },\n`;
			});
			strOutput += `];\n`;
			strOutput += "slide.addChart(pptx.charts.LINE, CHART_DATA, {x:0.25, y:0.25, w:'95%', h:'90%', showLegend:true});\n";
			strOutput += "\n";
			strOutput += "pptx.writeFile({ fileName: 'pptxgenjs-data2chart.pptx' });\n"

			// 4: show javascript code
			document.getElementById(OUTPUT_ELE_ID).innerHTML = strOutput

			// 5: highlight javascript code
			Prism.highlightElement(document.getElementById(OUTPUT_ELE_ID));

			// LAST: set output tab to active
			const someTabTriggerEl = document.querySelector('#nav-output')
			const tab = new bootstrap.Tab(someTabTriggerEl)
			tab.show()
		}

		function popDemoData() {
			document.getElementById('inputTextArea').value =
				`Mon-YY	CAN	GER	JAP	USA` + `\n` +
				`Mar-01	291	284	306	220` + `\n` +
				`Jun-01	185	179	199	299` + `\n` +
				`Sep-01	110	096	136	249` + `\n` +
				`Dec-01	110	100	128	217` + `\n`
		}

		function copyOutputToClipboard() {
			let range = document.createRange();
			range.selectNode(document.getElementById(OUTPUT_ELE_ID));
			window.getSelection().removeAllRanges();
			window.getSelection().addRange(range);
			document.execCommand("copy");
			window.getSelection().removeAllRanges();
		}

		function genOutputPowerPoint() {
			const outputCode = document.getElementById(OUTPUT_ELE_ID).innerText;
			if (outputCode) eval(outputCode)
		}

		window.onload = (event) => { popDemoData() };
	</script>
</head>
<body>
	<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://gitbrent.github.io/PptxGenJS/">
				<img src="images/favicon.png" height="30" class="d-inline-block align-top me-2" alt="" />
				PptxGenJS
			</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarColor01">
				<ul class="navbar-nav me-auto">
					<li class="nav-item active">
						<a class="nav-link" href="https://gitbrent.github.io/PptxGenJS/tools/data2chart.html">
							Data2Chart Tool <span class="sr-only">(current)</span>
						</a>
					</li>
				</ul>
				<div class="hstack gap-1">
					<button type="button" class="btn btn-primary" title="Releases" onClick="window.open('https://github.com/gitbrent/PptxGenJS/releases')">
						<i class="bi bi-box-arrow-up-right me-2"></i>Latest Release
					</button>
					<button type="button" class="btn btn-primary" title="Docs" onClick="window.open('https://gitbrent.github.io/PptxGenJS/docs/installation/')">
						<i class="bi bi-box-arrow-up-right me-2"></i>Docs
					</button>
					<div class="vr my-2 mx-2"></div>
					<button type="button" class="btn btn-primary" title="@gitbrent@fosstodon.org" onClick="window.open('https://fosstodon.org/@gitbrent')">
						<i class="bi bi-mastodon"></i>
					</button>
					<button type="button" class="btn btn-primary" title="GitHub" onClick="window.open('https://gitbrent.github.io/PptxGenJS')">
						<i class="bi bi-github"></i>
					</button>
				</div>
			</div>
		</div>
	</nav>
	<div class="container my-4">
		<!-- header -->
		<header class="mb-4">
			<div class="row">
				<div class="col">
					<h2 class="fw-light mb-0">PptxGenJS | Tools | Chart Data Converter</h2>
				</div>
				<div class="col-auto">
					<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDocs" aria-controls="offcanvasDocs">
						Documentation
					</button>
				</div>
			</div>
		</header>
		<!-- nav-tabs -->
		<ul class="nav nav-underline h3" id="myTab" role="tablist">
			<li class="nav-item" role="presentation">
				<button class="nav-link pe-5 active" id="nav-input" data-bs-toggle="tab" data-bs-target="#tab-input" type="button" role="tab" aria-controls="itab-ntroduction"
					aria-selected="true" onclick="location.href='#input'">
					<i class="bi bi-table me-2"></i>Input
				</button>
			</li>
			<li class="nav-item" role="presentation">
				<button class="nav-link pe-5" id="nav-output" data-bs-toggle="tab" data-bs-target="#tab-output" type="button" role="tab" aria-controls="tab-output"
					aria-selected="false" onclick="location.href='#output'">
					<i class="bi bi-braces me-2"></i>Output
				</button>
			</li>
		</ul>
		<!-- tab-content -->
		<main class="tab-content mb-4">
			<div class="tab-pane py-4 active" id="tab-input" role="tabpanel" aria-labelledby="nav-input">
				<h4 class="text-info">Tabular Data</h4>
				<div class="bg-primary-subtle text-white mb-3 border-start border-info border-4 px-4 py-3 mb-4">
					<div class="text-white">Paste tab-separated table data below (sample data provided) and click <code>Convert Data</code>.</div>
				</div>
				<textarea class="bg-black form-control font-monospace text-sm border" id="inputTextArea" rows="14"></textarea>
				<div class="row justify-content-between mt-4">
					<div class="col-auto">
						<button type="button" class="btn btn-lg btn-success px-5" onclick="convertInputData()"><i class="bi bi-gear me-2"></i>Convert Data</button>
					</div>
				</div>
			</div>
			<div class="tab-pane py-4" id="tab-output" role="tabpanel" aria-labelledby="nav-output">
				<h4 class="text-info"></i>JavaScript Code</h4>
				<pre class="bg-black text-sm"
					style="max-height: 400px;"><code id="outputTextArea" class="language-javascript" contenteditable="true" spellcheck="false"></code></pre>
				<div class="row gx-4 mt-4">
					<div class="col-auto">
						<button type="button" class="btn btn-lg btn-success px-5" onclick="genOutputPowerPoint()"><i class="bi bi-file-ppt me-2"></i>Generate PowerPoint</button>
					</div>
					<div class="col-auto">
						<button type="button" class="btn btn-lg btn-outline-success px-5" onclick="copyOutputToClipboard()"><i class="bi bi-clipboard me-2"></i>Copy to
							Clipboard</button>
					</div>
				</div>
			</div>
		</main>
	</div>
	<!-- offcanvas docs -->
	<div id="offcanvasDocs" class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
		<div class="offcanvas-header">
			<h5 class="offcanvas-title" id="offcanvasLabel">Data-to-Chart Tool Instructions</h5>
			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
		</div>
		<div class="offcanvas-body">
			<p>This tool converts tab-separated table data into PptxGenJS chart code.</p>
			<h5>📥 Step 1: Paste Your Data</h5>
			<ul>
				<li>Paste tab-delimited data from Excel, a TSV file, or any table into the input box.</li>
				<li>The first row should contain column headers (e.g., dates or categories).</li>
				<li>The first column will be used for labels, and the remaining columns will be treated as data series.</li>
			</ul>
			<h5>🔄 Step 2: Convert Data</h5>
			<ul>
				<li>Click the Convert Data button to generate your JavaScript chart code.</li>
				<li>The output will be compatible with any pptxgenjs.addChart() call.</li>
			</ul>
		</div>
	</div>
</body>
</html>
